import React from 'react';
import {Provider} from 'react-redux';
import {createStore, combineReducers, compose} from 'redux';
import {ScratchPaintReducer} from 'scratch-paint';

import ConnectedIntlProvider from './connected-intl-provider.jsx';//GUI外面依赖的组件PaintEditorComponent需要此模块

import localesReducer, {localesInitialState} from '../reducers/locales';
import guiReducer, {guiInitialState, guiMiddleware,} from '../reducers/gui';
import SessionReducer, {initializedSession} from '../reducers/session';//加入Session
import projectStateReducer, {projectStateInitialState} from '../reducers/project-state';
import cardsReducer, {cardsInitialState} from '../reducers/cards';

//const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
/*//提供 redux state 的高阶组件
 * @param {React.Component} WrappedComponent - component to provide state for
 * @returns {React.Component} component with redux and intl state provided
 */

const AppStateHOC = function (WrappedComponent) {
    class AppStateWrapper extends React.Component {
        constructor (props) {
            super(props);
            
            const reducer = combineReducers({
                locales: localesReducer,
                scratchGui: guiReducer,
                session: SessionReducer,//加入Session Reducer
                project: projectStateReducer,//作品Reducer
                cards: cardsReducer,//课程卡

                scratchPaint: ScratchPaintReducer,//造型Tab页面需要此属性
            });
            let initialState = {
                locales: localesInitialState,//本地语言
                scratchGui: guiInitialState,//GUI
                session: props._session.userid?props._session:initializedSession,//初始化用户登录信息Session
                project:projectStateInitialState,//初始化作品
                cards: cardsInitialState,//初始化课程卡
            };
            //let enhancer = composeEnhancers(guiMiddleware);

            this.store = createStore(//创建整个APP的Store
                reducer,
                initialState,
                //enhancer
            );
        }


        render () {
            return (
                <Provider store={this.store}>
                    <ConnectedIntlProvider>
                        <WrappedComponent/>
                    </ConnectedIntlProvider>
                </Provider>
            );
        }
    }


    return AppStateWrapper;
};

export default AppStateHOC;
